<template>
  <div class="questionlnfo" v-if="bol">
    <hm-nav-bar
      title="刷题"
      path="/home/question"
      right="答题卡"
      @rightClick="rightEvent"
    ></hm-nav-bar>
    <div class="content" v-if="list.length && list[currIndex].detail">
      <div class="title">
        【{{ typeObj[list[currIndex].detail.type] }}】{{
          list[currIndex].detail.title
        }}
      </div>
      <van-tag
        v-for="(item, index) in list[currIndex].detail.tag"
        :key="index"
        class="tag"
        color="#f7f4f5"
        text-color="#bebec5"
        >{{ item }}</van-tag
      >
      <!-- 单选 -->
      <ul class="select iconfont" v-if="list[currIndex].detail.type === 1">
        <li
          class="item"
          :class="{
            active: str[index] === ans1,
            right:
              list[currIndex].answer &&
              str[index] === list[currIndex].answer.singleAnswer,
            error:
              list[currIndex].answer &&
              ans1 === str[index] &&
              ans1 !== list[currIndex].answer.singleAnswer
          }"
          v-for="(item, index) in list[currIndex].detail.option"
          :key="index"
          @click="liClick(index)"
        >
          {{ str[index] }}.{{ item }}
        </li>
      </ul>
      <!-- 多选 -->
      <ul class="select" v-else-if="list[currIndex].detail.type === 2">
        <li
          class="item"
          :class="{
            active: ans2.includes(str[index]),
            right:
              list[currIndex].answer &&
              list[currIndex].answer.multipleAnswer.includes(str[index]),
            error:
              list[currIndex].answer &&
              ans1 === str[index] &&
              list[currIndex].answer.multipleAnswer.includes(str[index])
          }"
          v-for="(item, index) in list[currIndex].detail.option"
          :key="index"
          @click="liClick2(index)"
        >
          {{ str[index] }}.{{ item }}
        </li>
      </ul>
      <!-- 简答 -->
      <div v-else>
        <van-field
          class="field"
          v-model="ans3"
          type="textarea"
          rows="6"
          @input="inputEvent"
          :disabled="step > 1"
        ></van-field>
      </div>
    </div>
    <!-- 答案解析 -->
    <div class="answer" v-if="step > 1">
      <h3 class="answer-title">答案解析</h3>
      <div class="answer-right">
        正确答案：{{ list[currIndex].answer.singleAnswer }}
      </div>
      <div class="other">
        <div class="o1">
          难度：{{ diffObj[list[currIndex].answer.difficulty] }}
        </div>
        <div class="o2">提交次数：{{ list[currIndex].answer.submitNum }}</div>
        <div class="o3">正确次数：{{ list[currIndex].answer.correctNum }}</div>
      </div>
      <div class="answer-txt">
        {{ list[currIndex].answer.answerAnalysis }}
      </div>
    </div>
    <!-- 答题卡弹框 -->
    <van-popup v-model="showCard" position="bottom">
      <ul class="card-list">
        <li
          @click="skip(index)"
          class="card-item"
          v-for="(item, index) in list"
          :key="index"
          :class="{
            right1: item.answer && item.answer.isRight,
            error1: item.answer && !item.answer.isRight
          }"
        >
          {{ index + 1 }}
        </li>
        <li class="noUse"></li>
        <li class="noUse"></li>
        <li class="noUse"></li>
        <li class="noUse"></li>
        <li class="noUse"></li>
        <li class="noUse"></li>
        <li class="noUse"></li>
        <li class="noUse"></li>
        <li class="noUse"></li>
      </ul>
    </van-popup>
    <!-- 底部 -->
    <div class="footer">
      <div class="f1">
        <i class="iconfont">&#xe649;</i>
        <div class="txt">收藏</div>
      </div>
      <div class="f1">
        <i class="iconfont">&#xe606;</i>
        <div class="txt">反馈</div>
      </div>
      <div class="f2">
        <span>{{ currIndex + 1 }}</span
        >/{{ list.length }}
      </div>
      <div class="f3">
        <van-button
          color="#e40137"
          style="width:100px"
          :disabled="step < 1"
          @click="Submit"
          v-if="step < 2"
          >提交</van-button
        >
        <van-button
          color="#e40137"
          style="width:100px"
          v-else-if="step === 2"
          @click="next"
          >下一题</van-button
        >
        <van-button v-else color="#e40137" style="width:100px">结束</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import {
  interviewQuestions,
  questionsSubmit,
  questionsId
} from '@/api/question.js'
export default {
  data () {
    return {
      id: this.$route.params.id, // 传过来的id
      city: this.$route.query.city, // 传过来的城市
      list: [], // 保存题目
      currIndex: 0, // 当前第几题
      typeObj: {
        // 题型对象
        1: '单选',
        2: '多选',
        3: '简答'
      },
      diffObj: {
        // 题型难度
        1: '简单',
        2: '一般',
        3: '困难'
      },
      str: 'ABCD', // 选项转换用的字符串
      step: 0, //  0获取题目 但还没有答题 1表示已答题，但还没有点提交 2 已提交，但不是最后一题 3已提交且是最后一题
      ans1: '', // 单选题答案
      ans2: [], // 多选答案
      ans3: '', // 简答
      bol: true,
      showCard: false
    }
  },
  // 一进到页面发送axios请求获取面试题
  async created () {
    const res = await interviewQuestions({
      type: this.id,
      city: this.city
    })
    // 存储题目
    this.list = res.data.data
    console.log('获取面试题目', res)
  },
  methods: {
    rightEvent () {
      this.showCard = true
    },
    // 单选点击
    liClick (index) {
      // 限制只有step=0或者1才可以选择答案
      if (this.step < 2) {
        // 在点击事件中将索引转换成ABCD并存储起来 让step=1
        this.ans1 = this.str[index]
        this.step = 1
      }
    },
    // 多选点击
    liClick2 (index) {
      if (this.step < 2) {
        // 判断当前ans2有没有当前 选项答案
        // 判断当前多选选择答案是否包含当前选项
        const _index = this.ans2.indexOf(this.str[index])
        if (_index !== -1) {
          // 有该选项
          this.ans2.splice(_index, 1)
        } else {
          // 没有该选项
          this.ans2.push(this.str[index])
        }
        if (this.ans2.length === 0) {
          this.step = 0
        } else {
          this.step = 1
        }
      }
    },
    // 点击提交答案，发送axios请求
    async Submit () {
      const res = await questionsSubmit({
        id: this.list[this.currIndex].id,
        // 提交单选题时要获取单选
        singleAnswer: this.ans1,
        multipleAnswer: this.ans2
      })
      console.log('点击提交答案', res)
      // 将step变为2 因为2是点击了提交，但还不是最后一题
      this.step = 2
      // 存储答案到数组相应的位置
      this.list[this.currIndex].answer = res.data.data
      // 判断是否是最后一题
      // 如果是最后一题就把step=3，否step=2
      if (this.currIndex === this.list.length - 1) {
        this.step = 3
      } else {
        this.step = 2
      }

      // 提交时存储答案到相应选项下面，以便后面skipi使用
      this.list[this.currIndex].ans1 = this.ans1
      this.list[this.currIndex].ans2 = this.ans2
      this.list[this.currIndex].ans3 = this.ans3
      // 还有提交之后的正确答案解析
      this.list[this.currIndex].answer = res.data.data
      console.log(this.list)
    },
    // 点击下一题
    async next () {
      // 题目索引++
      this.currIndex++
      // 不使用以前next,因为它以前很多情况没有考虑。直接使用skip
      this.skip(this.currIndex)

      // // 还原step
      // this.step = ''
      // this.ans1 = ''
      // this.ans2 = []
      // // 根据id获取题目
      // const res = await questionsId(this.list[this.currIndex].id)
      // // 获取到题目后将题目加到相应数组索引下的detail字段
      // this.list[this.currIndex].detail = res.data.data
      // // 静默刷新
      // this.bol = false
      // this.$nextTick(() => {
      //   this.bol = true
      // })
      // console.log(res)
    },
    // 简答输入
    inputEvent () {
      // 判断输入框无值就step=0 有值step=1
      if (this.ans3.length === 0) {
        this.step = 0
      } else {
        this.step = 1
      }
    },
    // 答题卡
    async skip (index) {
      // 关闭弹框
      this.showCard = false
      // 让currindex=当前传递过来的索引
      this.currIndex = index
      // 清空答案
      this.step = 0
      this.ans1 = ''
      this.ans2 = []
      this.ans3 = ''
      // 有题目
      if (this.list[this.currIndex].detail) {
        // 有答案
        if (this.list[this.currIndex].answer) {
          // 还原以前做的答案的值
          this.ans1 = this.list[this.currIndex].ans1
          this.ans2 = this.list[this.currIndex].ans2
          this.ans3 = this.list[this.currIndex].ans3
          // 判断是否最后一题，不是最后一题step=2 是最后一题step=3
          if (this.currIndex === this.list.length - 1) {
            this.step = 3
          } else {
            this.step = 2
          }
        } else {
          // 没有答案，step=0(表示没做过该题)
          this.step = 0
        }
      } else {
        // 没有题目就获取题目并存储
        // 根据id获取题目
        const res = await questionsId(this.list[this.currIndex].id)
        // 获取到题目后将题目加到相应数组索引下的detail字段
        this.list[this.currIndex].detail = res.data.data
      }
      // 静默刷新
      this.bol = false
      this.$nextTick(() => {
        this.bol = true
      })
    }
  }
}
</script>

<style lang="less" scoped>
.questionlnfo {
  padding-bottom: 60px;
  .content {
    padding: 25px @p15;
    .title {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
      line-height: 22px;
    }
    .tag {
      padding: 5px 8px;
      margin-right: 15px;
    }
    .select {
      margin-top: 40px;
      .item {
        background: #ffffff;
        border: 1px solid #f7f4f5;
        border-radius: 4px;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: justify;
        color: #181a39;
        line-height: 22px;
        padding: 10px;
        text-align: left;
        margin-bottom: 15px;
      }
    }
  }
  .footer {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 @p15;
    height: 60px;
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 12px;
    color: #cccccc;
    .f1 {
      flex: 1;
      .iconfont {
        font-size: 28px;
      }
    }
    .f2 {
      flex: 2;
      color: #c7c7ce;
      font-size: 18px;
      span {
        font-size: 24px;
        color: red;
      }
    }
    .f3 {
      flex: 2;
      border-radius: 50px;
    }
  }
  // 定义一个active的class，选中选项后的状态
  .active {
    border-color: #181a39 !important;
  }
  .answer {
    padding: 30px @p15;
    .answer-title {
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: left;
      color: #222222;
      line-height: 25px;
      letter-spacing: 0px;
      padding-bottom: 17px;
    }
    .answer-right {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #1dc779;
      line-height: 22px;
      padding: 15px 0;
    }
    .other {
      background-color: #f7f4f5;
      padding: 6px 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #cccccc;
      margin-bottom: 15px;
    }
    .answer-txt {
      font-size: 16px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: justify;
      color: #181a39;
      line-height: 22px;
    }
  }
  // 加入正确与错误class
  .right {
    background-color: rgb(10, 230, 109) !important;
    position: relative;
    &::after {
      position: absolute;
      right: 10px;
      top: 50%;

      font-family: 'iconfont';
      transform: translateY(-50%);
      content: '\e604';
    }
  }
  .error {
    background-color: rgb(253, 123, 123) !important;
    position: relative;
    &::after {
      position: absolute;
      right: 10px;
      top: 50%;
      font-family: 'iconfont';
      transform: translateY(-50%);
      content: '\e605';
    }
  }
  .right1 {
    background-color: rgb(10, 230, 109) !important;
  }
  .error1 {
    background-color: rgb(253, 123, 123) !important;
  }
  .field {
    border: 2px solid #cccccc;
    margin-top: 15px;
  }
  .card-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 400px;
    overflow: auto;
    .card-item {
      width: 40px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      margin-right: 15px;
      margin-left: 15px;
      border-radius: 50%;
      border: 1px solid #cccccc;
      margin-top: 10px;
    }
    .noUse {
      width: 40px;
      height: 0;
      text-align: center;
      line-height: 40px;
      margin-right: 15px;
      margin-left: 15px;
    }
  }
}
</style>
